<template>
  <view class="y-flex"><image @click="setScore(index)" v-for="(name, index) in starts" :src="`${imageUrlone}/evaluate/${name}.svg`" :key="index" class="start" /></view>
</template>

<script>
import util from '../../lib/util.js';
export default {
  name: 'start',
  props: {
    full: {
      type: Number,
      default: 5
    },
    defScore: {
      type: Number,
      default: 5
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      score: null,
      imageUrlone:this.imageUrl
    };
  },
  computed: {
    starts() {
      // const res = new Array(5).fill('start'); //-grey
      const { score, defScore, full } = this;
      const light = score === null ? defScore : score;
      const grey = full - light;
      return util.creatTheArr(light, 'start').concat(util.creatTheArr(grey, 'start-grey'));
    },
    getScore() {
      return this.score || this.defScore;
    }
  },
  methods: {
    setScore(index) {
      if (this.disable) return;
      this.score = index + 1;
    }
  }
};
</script>

<style lang="scss" scoped>
.start {
  width: 44rpx;
  height: 44rpx;
  margin-right: 20rpx;
}
</style>
